.page-repositories {
  .new-repository-form {
    max-width: 750px;
    margin: 0 auto;

    @include breakpoint(md) {
      padding-right: 150px;
      background: transparent url(~images/new-repo.svg) right 20px no-repeat;
      background-size: 320px auto;
    }

    &[type=import] {
      background: none;
    }

    .card-static {
      background: #fff;
    }
  }
}

.page-repositories,
.page-repository_settings,
.page-issues,
.page-labels {
  .repo-heading {
    text-align: left;
    background: #F7F7F7;

    .container {

    }

    @include breakpoint(lg) {
      .container {
      }
    }

    .heading {
      display: block;
      align-items: center;

      margin: 20px 0 0px 20px;

      h1 {
        font-size: 28px; line-height: 28px;
        text-align: center;
        margin-bottom: 20px;
      }

      .repo-name {
        color: #333 !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        .divider {
          color: rgb(155, 155, 155);
          font-size: 0.8em;
          margin: 0 3px;
        }
      }

      .group-name {
        max-width: 250px;
        @extend .text-overflow;
        color: #333 !important;
      }
      .repository-name {
        max-width: 300px;
        @extend .text-overflow;
        color: #333 !important;
      }

      @include breakpoint(md) {
        display: flex;

        h1 {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .repo-name {
            display: flex;
            align-items: center;
          }
        }

        .heading-actions {
          justify-content: flex-end;
          flex-grow: 2;
          text-align: right;

          .repo-actions {
            margin-bottom: 20px;
          }
        }
      }
    }

    .heading-actions {
      text-align: center;
    }
  }



  .repo-actions {
    margin-right: 20px;
    .btn {
      height: auto;
      padding: 0;
      line-height: 100%;
      border: none;
      background: transparent;
      padding: 5px;
      margin: 0 10px;
      box-shadow: none;

      .fas {
        font-size: 1rem;
        margin-top: -1px;
      }

      span { padding: 0px; }
      .social-count { margin: 0; margin-left: 5px; color: $text-gray; }
    }
    .social-count {
      font-style: normal;
    }
    .btn-create-doc:hover,
    .action-button a:hover {
    }

  }

  .repo-description {
    margin-bottom: 20px;
    font-size: 16px;
    height: 24px;
    overflow: hidden;
  }

  .repository-docs, .repo-toc {
    @include breakpoint(md) {
      margin: 0 auto;
    }
    .doc-item .title {
      width: 100%;
      padding-right: 70px;
    }
  }
  .repo-toc {
    font-size: 16px;
    text-align: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 3px;

    .toc-header {
      position: relative;

      .title {
        padding-bottom: 12px;
        text-align: center;
        color: #252525;
        font-size: 24px;
      }

      .description {
        font-size: 13px;
        color: #8a8a8a;
      }

      .edit-link {
        font-size: 14px;
        @extend .icon-middle-wrap;
        .fas {
          transform: scale(1.1);
        }
      }
    }
  }

  @media (min-width: 768px) {
    .repo-toc {
      .toc-list {
        max-width: 850px;
        margin: 0px auto 30px auto;
      }
    }
  }

  #repository-members {
    .repository-member {
      position: relative;
      .edit-member, .delete-member {
        position: absolute;
        top: 5px;
      }
      .edit-member {
        right: 100px;
        margin: 0;
        .select-menu-modal {
          position: absolute;
          left: 0;
          top: 39px;
          z-index: 99;
          width: 200px;
        }
        summary.select-menu-button {
          text-align: left;
        }
      }
      .delete-member {
        top: 6px;
        right: 10px;
      }
    }
  }
  .transfer-docs {
    .docs-list{
      max-height: 390px;
      overflow-y: scroll;
      border: 1px solid #e0e0e0;
      padding: 0 20px;
      .form-checkbox {
        width: 15px;
        height: 15px;
      }
      .box-row {
        padding-top: 20px;
        padding-bottom: 15px;
        margin-bottom: 0;
      }
    }
    .box-select {
      width: 310px;
      .btn {
        text-align: left;
      }
    }
  }
}
